<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link th:href="@{/bootstrap/css/bootstrap-datetimepicker.min.css}" rel="stylesheet" media="screen"/>
    <title>省级日度回收走势</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('报表管理','省级日度回收走势')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">月度订单走势</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form id="queryForm" th:action="@{flow}" method="post">
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="input-group date form_date" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                                    <input id="selmonth" th:name="month" class="form-control input-sm" type="text" th:value="${month}" readonly="readonly" placeholder="成交开始时间" />
                                    <span class="input-group-addon" ><span class="glyphicon glyphicon-calendar"></span></span>
                                </div>
                            </div>

                            <!--<shiro:hasRole name="sys_nationwide">

                            </shiro:hasRole>-->
                            <input type="hidden" th:name="userId" th:value="${session.authUser.userId}"/>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询
                                </button>
                            </div>

                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>


                    <!--图一-->
                    <div id="main" style="width: 550px;height:400px;float:left"></div>

                    <!--图二  全国省级目标订单回收量-->
                    <div id="main2" style="width: 550px;height:400px; float:right"></div>

                    <!--图三-->
                    <div id="main3" style="width: 550px;height:400px;float:left"></div>

                    <!--月平均回收单价-->
                    <div id="main4" style="width: 550px;height:400px;float:right"></div>


            </div>



            <!-- /.box -->
        </div>

    </div>

    <script th:src="@{/charts/echarts.js}"></script>
    <script th:src="@{/charts/shine.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap-datetimepicker.js}" charset="UTF-8"></script>
    <script type="text/javascript" th:src="@{/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js}" charset="UTF-8"></script>
    <script>

        $('.form_date').datetimepicker({
            format: 'yyyy-mm',
            autoclose: true,
            todayBtn: true,
            startView: 'year',
            minView:'year',
            maxView:'decade',
            language:  'zh-CN',
            startDate:'2017-06',
            endDate:new Date()
        });

        $(function () {

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            var myChart2 = echarts.init(document.getElementById('main2'));
            var myChart3 = echarts.init(document.getElementById('main3'));
            var myChart4 = echarts.init(document.getElementById('main4'));


            // 使用刚指定的配置项和数据显示图表。
            window.onresize = myChart.resize;
            window.onresize = myChart2.resize;
            window.onresize = myChart3.resize;
            window.onresize = myChart4.resize;


            // 异步加载数据
            getdata();


            $('#btn-query').on("click", function () {
                getdata();
            });

            function getdata(){
                myChart.showLoading();
                myChart2.showLoading();
                myChart3.showLoading();
                myChart4.showLoading();
                $.post( 'flow',
                    $("#queryForm").serialize(),
                    function (datas) {
                        var data = $.parseJSON(datas);
                        var month = $('#selmonth').val();
                        // 填入数据
                        myChart.hideLoading();
                        myChart.setOption({
                            color: ['#3398DB'],
                            title: {
                                text: '全国门店总产能',
                                subtext: month
                            },
                            tooltip: {},
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data:[]
                            },
                            xAxis: {
                                data: ["总门店数","未产能门店数","产能门店数"]
                            },
                            yAxis: {},
                            series: [{
                                name: '个数',
                                type: 'bar',
                                barWidth: '40%',
                                data: data.chanNeng,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal:{
                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params){
                                            var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)','rgb(0,255,255)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });
                        myChart2.hideLoading();
                        myChart2.setOption({
                            color: ['#3398DB'],
                            title: {
                                text: '全国省级订单回收量',
                                subtext: month
                            },
                            tooltip: {},
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data:[]
                            },
                            yAxis: {},
                            xAxis: {
                                data: data.province
                            },
                            series: [{
                                name: '回收量',
                                type: 'bar',
                                barWidth: '40%',
                                data: data.provinceNum,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal:{
                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params){
                                            var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)','rgb(0,255,255)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });
                        myChart3.hideLoading();
                        myChart3.setOption({
                            color: ['#3398DB'],
                            title: {
                                text: '全国系统回收量',
                                subtext: month
                            },
                            tooltip: {},
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data:[]
                            },
                            xAxis: {
                                data: ["苹果","安卓","爱心回收"]
                            },
                            yAxis: {},
                            series: [{
                                name: '回收量',
                                type: 'bar',
                                barWidth: '40%',
                                data: data.typeNum,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal:{
                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params){
                                            var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)','rgb(0,255,255)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });
                        myChart4.hideLoading();
                        myChart4.setOption({
                            color: ['#3398DB'],
                            title: {
                                text: '月平均回收单价',
                                subtext: month
                            },
                            tooltip: {},
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            legend: {
                                data:[]
                            },
                            xAxis: {
                                data: data.province
                            },
                            yAxis: {},
                            series: [{
                                name: '均价',
                                type: 'bar',
                                barWidth: '40%',
                                data: data.averagePri,
                                //配置样式
                                itemStyle: {
                                    //通常情况下：
                                    normal:{
                                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                                        color: function (params){
                                            var colorList = ['rgb(164,205,238)','rgb(42,170,227)','rgb(25,46,94)','rgb(195,229,235)','rgb(0,255,255)'];
                                            return colorList[params.dataIndex];
                                        }
                                    },
                                    //鼠标悬停时：
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        });
                    });
            }


        })



    </script>


</div>


</body>
</html>